<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Request</view>
			<view class="tui-page__desc">网络请求：支持Promise，支持请求拦截和响应拦截,支持请求未结束之前阻止重复请求等，具体使用请参考文档。</view>
		</view>
		<view class="tui-page__bd">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto 40rpx"
				@click="get">返回全部数据</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto 40rpx"
				@click="get2">返回简洁数据</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="get3">携带参数</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="get4">合并多个请求</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto"
				@click="get5">异步转同步</tui-button>

		</view>
	</view>
</template>

<script>
	/**
	 * 请先查看文档引入，再使用
	 * 案例只展示了get请求，post请求和get请求类似 this.http.post
	 * 其他请求方式，如PUT、DELETE等，请使用api：this.http.request
	 * 具体使用请参考文档说明：https://thorui.cn/doc/docs/extend/tui-request.html
	 * */
	export default {
		data() {
			return {

			}
		},
		methods: {
			//返回全部数据
			get() {
				this.http.get('/Home/GetStatus').then(res => {
					console.log(res)
					const d = res.data;
					if (d.code == 100) {
						this.tui.toast('请求成功！')
					}
				}).catch(e => {
					console.log(e)
				})
			},
			//返回简洁数据
			get2() {
				this.http.get('/Home/GetStatus', {
					//参数
					//data:{version:'v1.6.3'},
					//仅返回data数据
					concise: true
				}).then(res => {
					console.log(res)
					if (res.code == 100) {
						this.tui.toast('请求成功！' + JSON.stringify(res))
					}
				}).catch(e => {
					console.log(e)
				})
			},
			get3() {
				this.http.request({
					url: '/Home/GetStatus',
					method: 'GET',
					data: {
						version: 'v1.6.3'
					}
				}).then(res => {
					console.log(res)
					const d = res.data;
					if (d.code == 100) {
						this.tui.toast('请求成功！' + JSON.stringify(d))
					}
				}).catch(e => {})
			},
			get4() {
				//合并多个请求：都返回数据后再进行其他操作
				let func1 = this.http.get('/Home/GetStatus')
				let func2 = this.http.get('/Home/GetStatus', {
					concise: true
				})
				this.http.all([func1, func2]).then(res => {
					console.log(res)
					this.tui.toast('请求成功！')
				}).catch(e => {})
			},
			async get5() {
				let res = await this.http.get('/Home/GetStatus', {
					concise: true
				})
				console.log(res)
				console.log('计算结果：1+res.data=' + (1 + res.data))
				this.tui.toast('请求成功！' + JSON.stringify(res))
			}
		}
	}
</script>

<style>

</style>
